<template>
  <div id="app">
     <!-- 
        el-row 行
        el-col 列 默认将页面分成24列
      -->
      <el-row :gutter="20"> <!-- Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0 -->
         <el-col :span="6"><!-- span属性 规定分为多少列 -->
            <div class="bg-bule"></div>
         </el-col>
         <el-col :span="6">
            <div class="bg-pink"></div>
         </el-col>
         <el-col :span="6">
            <div class="bg-red"></div>
         </el-col>
         <el-col :span="6">
            <div class="bg-yellow"></div>
         </el-col>
      </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
*{
   margin: 0;
   padding: 0;
   box-sizing:border-box
}

</style>